<template>
	<view class="tabbar">

		<view class="tab" v-for="(item,index) in tabbarList" :key="index">
			<!-- 判断是否有点击，如果没有就不是激活样式，点击就是激活的样式 -->
			<button @click="navigatorTo(item.url)"></button>
			<image class="imgsize" v-if="item.type == 0" :src="current == index ? item.selectIcon : item.icon"
				mode="widthFix"></image>
			<view :class="current == index ?'active':'text'">{{item.name}}</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'pinia'
	import {
		useUserInfoStore
	} from '../../stores/userInfo.js'
	export default {
		name: "tabbar",
		props: {
			current: {
				type: Number,
				default: 0, //默认第一个页面tabbar激活
			},
		},
		data() {
			return {
				tabbarList: [{
					type: 0,
					icon: '/static/首页.png',
					selectIcon: '/static/首页_selected.png',
					name: '首页',
					url: '/common/pages/index/index',
				}, {
					type: 0,
					icon: '/static/订单.png',
					selectIcon: '/static/订单_selected.png',
					name: '行程',
					url: '/common/pages/order/order',
				}, {
					type: 0,
					icon: '/static/我的.png',
					selectIcon: '/static/我的_selected.png',
					name: '我的',
					url: '/common/pages/my/my',
				}],
			};
		},
		computed: {
			...mapState(useUserInfoStore, ['id', 'phone', 'username', 'state'])
		},
		created() {
			// console.log("业务员："+this.state)
			// if(this.state){
			// 	this.tabbarList[1].name="订单"
			// }
		},
		methods: {
			navigatorTo(e) {
				uni.switchTab({
					url: e,
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		position: fixed;
		bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS<11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容iOS>= 11.2 */
		background-color: #FFFFFF;
		width: 100%;
		z-index: 1;
		box-sizing: border-box;
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
		// border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding-top: 15rpx;
		display: flex;
		padding-bottom: 15px;
		justify-content: space-around;
		align-items: center;

		.tab {
			display: flex;
			position: relative;
			flex-direction: column;
			align-items: center;
		}

		.tab button {
			position: absolute;
			background-color: transparent;
			z-index: 2;
			width: 240rpx;
			height: 120rpx;
			margin-top: -10rpx;
		}

		.tab button::after {
			border: none;
		}

		.imgsize {
			width: 46rpx;
			height: 46rpx;
		}

		.text {
			margin-top: 4rpx;
			padding-bottom: 12rpx;
			font-size: 20rpx;
			color: #333333;
			line-height: 20rpx;
		}

		.active {
			margin-top: 4rpx;
			padding-bottom: 12rpx;
			font-size: 20rpx;
			color: #2196F3;
			line-height: 20rpx;
		}
	}
</style>